<template>
  <div>
    <el-row type="flex" justify="space-between" class="title">
      <h4>{{ title === "add" ? "新增试题" : "修改试题" }}</h4>
      <el-button
        class="btn-cts"
        type="primary"
        plain
        size="mini"
        @click="btnBack"
        >返回列表</el-button
      >
    </el-row>
    <el-divider></el-divider>
    <div class="content">
      <!-- 第一行 -->
      <el-row>
        <el-col :span="8" :offset="0">
          <span class="text">学科方向</span>
          <el-select
            v-model="questionList.subject_id"
            placeholder="归属学科"
            size="small"
            clearable
          >
            <el-option
              v-for="item in treeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8" :offset="0">
          <span class="text">目录信息</span>
          <el-select
            v-model="questionList.directory_id"
            placeholder="归属目录"
            size="small"
            clearable
          >
            <el-option
              v-for="item in directory_id"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8" :offset="0">
          <span class="text">标签信息</span>
          <el-select
            v-model="questionList.tag_info"
            placeholder="技能标签"
            size="small"
            multiple
            clearable
          >
            <el-option
              v-for="item in tag_id"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row>
        <el-col :span="8" :offset="0">
          <span class="text">试题难度</span>
          <el-radio-group v-model="questionList.difficulty">
            <el-radio
              v-for="item in difficulty"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="8" :offset="0">
          <span class="text">试题类型</span>
          <el-select
            v-model="questionList.quest_type"
            placeholder="请选择题型"
            size="small"
          >
            <el-option
              v-for="item in quest_type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8" :offset="0">
          <span class="text">是否面试真题</span>
          <el-radio-group v-model="questionList.is_true_question">
            <el-radio
              v-for="item in is_true_question"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2" :offset="0">
          <span class="text">题干信息</span>
        </el-col>
        <el-col :span="22" :offset="0">
          <WangEditor
            v-model="questionList.question"
            :value="questionList.question"
            refName="题干信息"
            class="wangEdit"
          />
        </el-col>
      </el-row>
      <!-- 简答题 -->
      <el-row v-if="questionList.quest_type === 4">
        <el-col :span="2" :offset="0">
          <span class="text">试题答案</span>
        </el-col>
        <el-col :span="22" :offset="0">
          <WangEditor
            v-model="questionList.quest_answer"
            :value="questionList.quest_answer"
            refName="试题答案"
            class="wangEdit"
          />
        </el-col>
      </el-row>
      <!-- 选择题 -->
      <el-row
        v-if="questionList.quest_type === 1 || questionList.quest_type === 2"
      >
        <el-col :span="2" :offset="0">
          <span class="text">试题答案</span>
        </el-col>
        <el-col :span="22" :offset="0">
          <el-table
            :data="code ? questionList.quest_options : tableData"
            style="width: 90%"
            key="3"
            border
          >
            <el-table-column
              align="center"
              prop="code"
              :label="questionList.quest_type === 1 ? '单选项' : '多选项'"
              width="100"
            >
              <template slot-scope="{ row }">
                <el-checkbox
                  @change="statusChange"
                  :label="row.code"
                  v-model="row.is_true"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="content"
              align="center"
              :label="
                questionList.quest_type === 1 ? '单选项内容' : '多选项内容'
              "
              width="675"
            >
              <template slot-scope="{ row }">
                <el-input
                  type="textarea"
                  placeholder="请输入选项内容"
                  :autosize="{ minRows: 2 }"
                  v-model="row.content"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="pic"
              align="center"
              label="选择图片"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="操作"
              width="120"
            >
              <template slot-scope="{ row }">
                <span v-if="row.code === 'A'">
                  <el-button
                    type="success"
                    icon="el-icon-plus"
                    circle
                    size="mini"
                    @click="btnTable('add')"
                  ></el-button>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    size="mini"
                    @click="btnTable('del')"
                  ></el-button>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 判断题 -->
      <el-row v-if="questionList.quest_type === 3">
        <el-col :span="2" :offset="0">
          <span class="text">试题答案</span>
        </el-col>
        <el-col :span="22" :offset="0">
          <el-table :data="checkData" style="width: 90%" border>
            <el-table-column prop="code" label="判断项" width="1045">
              <template slot-scope="{ row }">
                <el-checkbox
                  :label="row.code"
                  v-model="row.is_true"
                ></el-checkbox>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row
        v-if="
          questionList.quest_type !== 4 &&
          questionList.quest_type !== 3 &&
          questionList.quest_type !== 2 &&
          questionList.quest_type !== 1
        "
      >
        <el-col :span="2" :offset="0">
          <span class="text">试题答案</span>
        </el-col>
        <el-col :span="22" :offset="0">
          <span>请选择试题类型，生成答案模板</span>
        </el-col>
      </el-row>
      <!-- 答案解析 -->
      <el-row>
        <el-col :span="2" :offset="0">
          <span class="text">答案解析</span>
        </el-col>
        <el-col :span="22" :offset="0">
          <WangEditor
            v-model="questionList.quest_remark"
            :value="questionList.quest_remark"
            refName="答案解析"
            class="wangEdit"
          />
        </el-col>
      </el-row>
      <!-- 按钮 -->
      <el-row class="btnCheck">
        <el-button type="primary" @click="btnOK">提交</el-button>
        <el-button @click="btnBack">取消</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import { AddQuestion } from "@/api/exam";
import WangEditor from "./WangEditor";
export default {
  name: "changeQuestion",
  props: {
    treeList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      title: "add",
      code: false,
      checkList: [],
      arr: [],
      quest_type: [
        { label: "单选题", value: 1 },
        { label: "多选题", value: 2 },
        { label: "判断题", value: 3 },
        { label: "简答题", value: 4 },
      ],
      checkData: [
        { code: "正确", content: "", is_true: false },
        { code: "错误", content: "", is_true: false },
      ],
      difficulty: [
        { label: "简单", value: 1 },
        { label: "中等", value: 2 },
        { label: "困难", value: 3 },
      ],
      is_true_question: [
        { label: "是", value: 1 },
        { label: "否", value: 2 },
      ],
      tableData: [
        { code: "A", content: "", is_true: false, pic: "" },
        { code: "B", content: "", is_true: false, pic: "" },
        { code: "C", content: "", is_true: false, pic: "" },
        { code: "D", content: "", is_true: false, pic: "" },
      ],
      questionList: {
        subject_id: "",
        directory_id: "",
        tag_id: "",
        difficulty: "",
        quest_type: "",
        is_true_question: 1,
        show_state: "",
        check_state: "",
        create_name: "",
        create_time: "",
        quest_answer: "",
        quest_options: "",
        quest_remark: "",
        question: "",
        tag_id: [],
      },
    };
  },
  components: {
    WangEditor,
  },
  methods: {
    btnBack() {
      this.$emit("closeBTN");
    },
    btnOK() {
      this.AddQuestion();
    },
    async AddQuestion() {
      // 处理数据
      this.questionList.difficulty =
        this.questionList.difficulty === "困难"
          ? 3
          : this.questionList.difficulty === "中等"
          ? 2
          : 1;
      this.questionList.is_true_question =
        this.questionList.is_true_question === "是" ? 1 : 2;
      this.questionList.tag_id = [...this.questionList.tag_id];
      this.questionList = {
        difficulty: this.questionList.difficulty,
        directory_id: this.questionList.directory_id,
        is_true_question: this.questionList.is_true_question,
        quest_answer: this.questionList.quest_answer || this.checkList.join(),
        quest_options: this.questionList.quest_options || this.tableData,
        quest_remark: this.questionList.quest_remark,
        quest_type: this.questionList.quest_type,
        question: this.questionList.question,
        subject_id: this.questionList.subject_id,
        tag_id: this.questionList.tag_id,
      };
      if (this.questionList.quest_type === 3) {
        this.questionList.quest_options = this.checkData;
        this.questionList.quest_answer = this.checkData.filter(item=>item.is_true === true)[0].code
      } else if (this.questionList.quest_type === 2) {
        let str = ''
        this.questionList.quest_options.forEach(item=>{

          if(item.is_true === true) {
            str += item.code
          }
          return str
        })
        console.log(str);
        this.questionList.quest_answer = str
      }
      await AddQuestion(this.questionList);
      this.$message.success("创建成功");
      this.$emit("closeBTN");
      this.$emit("init");
    },
    btnBack() {
      this.$emit("closeBTN");
    },
    statusChange(value) {
      if (this.questionList.quest_type === 1) {
        if (this.checkList.length > 1) {
          this.checkList.splice(0, 1);
        }
      }
      // console.log(1);
    },
    // 判断单选
    chackChange() {
      if (this.arr.length > 1) {
        this.arr.splice(0, 1);
      }
    },
    onceinit() {
      let data = this.questionList.quest_options || this.tableData;
      // console.log(this.questionList.quest_options);
      if (
        this.questionList.quest_type !== 1 &&
        this.questionList.quest_type !== 2
      ) {
        this.checkList = [];
        return;
      }
      // console.log(data, 3333);
      data = data.filter((item) => item.is_true === true);
      // console.log(data, 1111);
      data.forEach((item) => {
        this.checkList.push(item.code);
      });
      // console.log(this.checkList);
    },
    btnTable(type) {
      if (type === "add") {
        if (!this.code) {
          let index = String.fromCharCode(
            "A".charCodeAt(0) + this.tableData.length
          );

          this.tableData.push({
            code: index,
            content: "",
            is_true: false,
            pic: "",
          });
        } else {
          let index1 = String.fromCharCode(
            "A".charCodeAt(0) + this.questionList.quest_options.length
          );

          this.questionList.quest_options.push({
            code: index1,
            content: "",
            is_true: false,
            pic: "",
          });
        }
      } else {
        if (!this.code) {
          this.tableData.splice(this.tableData.length - 1, 1);
        } else {
          this.questionList.quest_options.splice(
            this.questionList.quest_options.length - 1,
            1
          );
        }
      }
    },
  },
  computed: {
    directory_id() {
      let obj = this.treeList.find((item) => {
        return item.id === this.questionList.subject_id;
      });
      // console.log(obj);
      obj = obj || {};
      return obj["children"];
    },
    tag_id() {
      if (!this.directory_id) {
        return [];
      } else {
        // console.log(1);
        let subList = this.questionList.directory_id;

        let obj1 = this.directory_id.find((item) => {
          // console.log(item.id);
          return item.id === subList;
        });
        // console.log(obj1);
        obj1 = obj1 || {};
        return obj1["children"];
      }
    },
  },
  watch: {
    tableData() {
      this.tableData = this.questionList.quest_options || this.tableData;
      console.log(1);
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  padding: 10px 20px;
  align-items: center;
  line-height: 10px;
  .btn-cts {
    height: 30px;
  }
}
.el-divider--horizontal {
  margin: 0;
  margin-bottom: 15px;
}
.wangEdit {
  width: 90%;
}
.text {
  font-weight: 700;
  font-size: 14px;
  color: #606266;
  margin-right: 10px;
}
.el-row {
  padding: 5px 20px;
}
.btnCheck {
  padding: 20px 125px;
  margin-bottom: 30px;
}
</style>
